<template>
  <div>
    <ol class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">数据列表</a></li>
      <li class="active">分配角色</li>
    </ol>
    <div class="panel panel-default">
      <div class="panel-body">
        <form role="form" class="form-inline">
          <div class="form-group">
            <label for="exampleInputPassword1">未分配角色列表</label><br>
            <select class="form-control" multiple size="10" v-model="checknoarid" style="width:100px;overflow-y:auto;">
              <option :value="item.id" v-for="(item,index) in noassignroleList" :key="index">{{item.name}}</option>

            </select>
          </div>
          <div class="form-group">
            <ul>
              <li @click="toRight" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
              <br>
              <li @click="toLeft" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
            </ul>
          </div>
          <div class="form-group" style="margin-left:40px;">
            <label for="exampleInputPassword1">已分配角色列表</label><br>
            <select class="form-control" v-model="checkarid" multiple size="10" style="width:100px;overflow-y:auto;">
              <option :value="item.id" v-for="(item,index) in assignroleList" :key="index">{{item.name}}</option>
            </select>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      id: parseInt(this.$route.params.id),
      noassignroleList: [],
      assignroleList: [],
      checknoarid: [], // 将要分配的option id集合
      checkarid: [] // 去掉已分配的option id集合
    }
  },
  methods: {
    toRight () {
      let torightdata = []
      let noassignroleid = ''
      let josndata = ''
      if (this.checknoarid.length > 0) {
        torightdata = this.noassignroleList.filter(item => this.checknoarid.indexOf(item.id) !== -1)
        this.checknoarid.forEach(item => {
          noassignroleid = noassignroleid + 'noassignroleid=' + item + '&'
        })
        noassignroleid = noassignroleid.substring(0, noassignroleid.length - 1)
        josndata = 'userid=' + this.id + '&' + noassignroleid // 拼接为一个参数串
        axios.post('/api/user/addrole', josndata).then((response) => {
          console.log(response)
          const success = response.data.success
          if (success) {
            this.noassignroleList = this.noassignroleList.filter(item => this.checknoarid.indexOf(item.id) === -1) // 将选中的子项过滤掉
            this.assignroleList = this.assignroleList.concat(torightdata)
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    toLeft () {
      let toleftdata = []
      let assignroleid = ''
      let josndata = ''
      if (this.checkarid.length > 0) {
        toleftdata = this.assignroleList.filter(item => this.checkarid.indexOf(item.id) !== -1)
        this.checkarid.forEach(item => {
          assignroleid = assignroleid + 'assignroleid=' + item + '&'
        })
        assignroleid = assignroleid.substring(0, assignroleid.length - 1)
        josndata = 'userid=' + this.id + '&' + assignroleid // 拼接为一个参数串
        axios.post('/api/user/deleterole', josndata).then((response) => {
          console.log(response)
          const success = response.data.success
          if (success) {
            this.assignroleList = this.assignroleList.filter(item => this.checkarid.indexOf(item.id) === -1) // 将选中的子项过滤掉
            this.noassignroleList = this.noassignroleList.concat(toleftdata)
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    }
  },
  mounted () {
    let jsondata = this.$qs.stringify({id: this.id})
    axios.post('/api/user/doassign', jsondata).then((response) => {
      const data = response.data.data
      console.log(data)
      this.assignroleList = data.assignRole
      this.noassignroleList = data.noassignRole
    }).catch(function (error) {
      console.log(error)
    })
  }
}
</script>
<style></style>
